<template>
	<view style="padding-top: 20upx;">
		<view class="webkit list angle" data-src="face/face">
			<image :src="real_head_img || '/static/missing-face.png'" style="width: 100upx;height: 100upx;margin-right: 24upx;border-radius: 50upx;"></image>
			<view class="mid flex">{{real_name}}</view>
			<!-- <input type="text" :value="real_name" @input="real_nameIpt" class="flex" /> -->
		</view>
		<view class="webkit list mt bb">
			<view class="title">真实姓名</view>
			<input type="text" :value="user_name" @input="realnameIpt" class="flex" />
		</view>
		<view class="webkit list angle mt bb" data-src="../bind/bind">
			<view class="title">手机号</view>
			<!-- <view class="flex" >{{phone_number}}</view> -->
			<input type="text" :value="phone_number" @input="phone_numberIpt" class="flex" />
			<!-- <view class="right">更换绑定</view> -->
		</view>
		<!-- <view class="webkit list angle mt" @click="jump" data-src="../paypwd/paypwd">
			<view class="title">支付密码</view>
			<view class="flex" v-if="paypwd == ''">未设置支付密码</view>
			<view class="flex" v-else>已设置支付密码</view>
			<view class="right" v-if="paypwd == ''">设置</view>
			<view class="right" v-else>修改</view>
		</view> -->
		
		<view class="webkit list mt bb">
			<view class="title">佣金:</view>
			<input type="text" disabled="true" :value="commision" class="flex" />
		</view>
		<view class="webkit list mt bb">
			<view class="title">等级:</view>
			<input type="text" disabled="true" :value="level_name" class="flex" />
		</view>
		<!-- <view class="webkit list mt bb">
			<view class="title">身份证号</view>
			<input type="text" :value="idcard" @blur="idcardIpt" class="flex" />
		</view>
		<view class="webkit list bb">
			<view class="title">微信号</view>
			<input type="text" :value="weixin" @blur="weixinIpt" placeholder="请输入您的微信号" class="flex"/>
		</view> -->
		<view class="webkit list bb" style="padding-top: 0;padding-bottom: 0;">
			<view class="title" style="line-height: 78upx;">登录日期</view>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="flex" style="padding: 0;">
				<view class="uni-input">{{date}}</view>
			</picker>
			
		</view>
		<!-- <view class="webkit list">
			<view class="title">所在城市</view>
				<button type="default" @click="showMulLinkageTwoPicker" class="flex cityp">{{pickerText}}</button>
		</view> -->
		<view style="padding: 0 24upx;">
			<button type="primary" style="background-color:#000;margin-top:20upx;" @click="submit">确认修改</button>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../common/city.data.js';
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				timestamp:'',
				token:'',
				district_id:'',
				city_id:'',
				province_id:'',
				real_name:'',
				level_name:'',
				commision:'',
				phone_number:'',
				real_head_img:'',
				user_id:'',
				user_name:'',
				res:[],
				date: currentDate,
				src:'',
				nickname:'',
				mobile:"",
				paypwd:"",
				realname:"",
				weixin:'',
				idcard:'',
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				data:[],
				birthyear:'',
				birthmonth:'',
				birthday:'',
				province:'',
				city:'',
				datavalue:'',
			};
		},
		computed: {
			startDate() {return this.getDate('start')},
			endDate() {return this.getDate('end')}
		},
		onLoad:function(){
			// uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
			uni.getStorage({
				key: 'timestamp',
				success: (res) => {
					this.timestamp = res.data
				},
				fail: () => {}
			});
			uni.getStorage({
				key: 'token',
				success: (res) => {
					this.token = res.data
				},
				fail: () => {}
			});
		},
		onPullDownRefresh() {
			let o = this
			setTimeout(function () {
				o.setAjax();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods:{
			setAjax(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/User/index',
					method: 'POST',
					data: {
						user_id: this.user_id,
						timestamp: this.timestamp, // 时间戳
						token: this.token,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						this.res = res.data.data
						this.user_name = this.res.user_name
						this.user_id = this.res.id
						this.real_head_img = this.res.real_head_img
						this.phone_number = this.res.phone_number
						this.commision = this.res.commision
						this.level_name = this.res.level_name
						this.real_name = this.res.real_name
						// this.timestamp = this.res.timestamp
						// this.token = this.res.token
						this.district_id = this.res.district_id
						this.city_id = this.res.city_id
						this.province_id = this.res.province_id
						
					},
					fail: () => {},
					complete: () => {}
				});
			},
			realnameIpt(e){
				this.user_name = e.detail.value
			},
			weixinIpt(e){
				this.weixin = e.detail.value
			},
			idcardIpt(e){
				this.idcard = e.detail.value
			},
			phone_numberIpt(e){
				this.phone_number = e.detail.value
			},
			real_nameIpt(e){
				this.real_name = e.detail.value
			},
			onCancel(e) {
			},
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				var time = e.target.value
				time = time.split('-')
				this.birthyear = time[0]
				this.birthmonth = time[1]
				this.birthday = time[2]
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			onConfirm(e) {
				this.pickerText = e.label
				var label = e.label
				label = label.split('-')
				this.datavalue = e.value[0] + ' ' + e.value[1]
				this.province = label[0]
				this.city =  label[1] 
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			submit(){
				uni.request({
					url:'https://cx.mingmeijt.com/Api/User/updateUserInfo',
					method: 'POST',
					data: {
						user_id: this.user_id,
						user_name :  this.user_name,
						province_id: this.province_id,
						city_id : this.city_id,
						district_id: this.district_id,
						phone_number :this.phone_number,
						token :this.token,
						timestamp :this.timestamp,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						if(res.data.code ==200){
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							});
							setTimeout(() =>{
								uni.reLaunch({
									url:'../../../pages/user/user'
								})
							},1500)
						}
					},
					fail: () => {},
					complete: () => {}
				});
				}
		}
	}
</script>
<style>
	.list{padding:16upx 24upx;background:#fff;}
	.angle{position:relative;padding-right:50upx;}.
	angle:after{content:" ";display:inline-block;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:16upx;width:16upx;border-width:2upx 2upx 0 0;border-color:#b2b2b2;border-style:solid;position:absolute;top:50%;right:30upx;margin-top:-8upx;box-sizing:border-box;}
	.list .title{width:130upx;line-height:50upx;color:#666;}
	.list .flex{line-height:50upx;color:#666;padding-left:24upx;}
	.list .right{color:#999;}
	.cityp{text-align:left;font-size:28upx;background:transparent;}
	.cityp:after{display:none;}
	.bb{position:relative;}
	.bb:before{content:" ";position:absolute;left:20upx;right:20upx;bottom:-2upx;height:2upx;border-top:1px solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);}
	</style>